<template>
  <h2>
    {{ status }}<span>{{ filterArr.length }}</span>
  </h2>
  <ol>
    <li v-for="(item, index) in filterArr" :key="index">
      <input type="checkbox" />
      <!-- 在点击p表标签时进入编辑的状态 -->
      <input style="width: 80%; margin-left: 30px" ref="input" />
      <!-- 不是编辑状态 -->
      <p>{{ item.val }}</p>
      <a href="javascript:;">-</a>
    </li>
  </ol>
</template>
<script>
import { computed, watch } from "vue";
export default {
  props: ["status", "arr"],
  setup(props) {
    // 
    let show = props.status === "已完成" ? true : false;
    let filterArr = [];
    filterArr = computed(() => {
      return (filterArr = props.arr.filter((item) => {
        return item.checked == show;
      }));
    });




    return {
      filterArr,
    };
  },
};
</script>
